<template>
  <div class="collect">
    <template v-if="collectList.length > 0">
      <div class="collect-item" v-for="item in collectList" :key="item.id">
        <img :src="item.logo" alt="">
        <div class="collect-item-right">
          <div class="title">{{ item.shopName }}</div>
          <div class="content">
            <div class="content-left">
              <div class="content-left-top">月销 {{ item.monthSales || 0 }}</div>
              <div class="content-left-bottom">配送¥{{ item.deliveryFeeStr || 0 }}</div>
            </div>
            <div class="content-right" @click="cancelCollect(item)">
              取消收藏
            </div>
          </div>
        </div>
      </div>
    </template>
    <div v-else class="empty">暂无收藏</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Fetch } from '@/composables/useFetch'

const collectList = ref([])

// 获取收藏列表
const loadCollectList = async () => {
  const res = await Fetch('shopping/collection/list', { method: 'GET' })
  if (res.data.code === 200) {
    collectList.value = res.data.rows || []
  } else {
    collectList.value = []
  }
}

// 取消收藏
const cancelCollect = async (item) => {
  const res= await Fetch(`shopping/collection/cancel/${item.shopId}`, {
    method: 'delete',
  })
  if (res.data.code === 200) {
    uni.showToast({ title: '已取消收藏', icon: 'success' })
    loadCollectList()
  } else {
    uni.showToast({ title: res.data.msg || '操作失败', icon: 'none' })
  }
}

onMounted(() => {
  loadCollectList()
})
</script>

<style lang="scss" scoped>
.collect {
  border-top: 1rpx solid #F1F1F2;
  padding: 46rpx 40rpx;

  .collect-item {
    display: flex;
    align-items: self-start;
    margin-bottom: 50rpx;

    image {
      width: 118rpx;
      height: 118rpx;
    }

    .collect-item-right {
      margin-left: 20rpx;
      flex: 1;
      .title {
        height: 40rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        line-height: 40rpx;
      }

      .content {
        display: flex;
        align-items: center;
        margin-top: 4rpx;

        .content-left {
          display: flex;
          height: 34rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 34rpx;

          .content-left-top {
            margin-right: 30rpx;
          }
        }

        .content-right {
          width: 136rpx;
          height: 50rpx;
          border-radius: 28rpx 28rpx 28rpx 28rpx;
          border: 2rpx solid #E68932;
          font-weight: 400;
          font-size: 24rpx;
          color: #E68932;
          line-height: 50rpx;
          text-align: center;
          margin-left: auto;
        }
      }
    }
  }
}
</style>
